<template>
  <div
    v-if="isExternal"
    class="svg-external-icon svg-icon"
    :style="styleExternalIcon"
    v-on="$listeners"
  />
  <iconifyIcon
    v-else-if="isIconifyIcon"
    class="svg-icon"
    :icon="icon"
    v-on="$listeners"
  />
  <svg
    v-else
    aria-hidden="true"
    :width="this.size"
    :height="this.size"
    class="svg-icon"
    v-on="$listeners"
  >
    <use :xlink:href="symbolId" :fill="color" />
  </svg>
</template>
<script>
import { isExternal } from '@/utils/validate'
import iconifyIcon from './iconifyIcon.vue'
export default {
  name: 'icon',
  components: { iconifyIcon },
  props: {
    prefix: {
      type: String,
      default: 'icon'
    },
    icon: {
      type: String,
      default: ''
    },
    color: {
      type: String
    },
    size: {
      type: String,
      default: '1em'
    },
    styleName: {
      type: [Object],
      default: () => ({})
    }
  },
  data() {
    return {}
  },
  created() {},
  mounted() {},
  computed: {
    // 是不是外链
    isExternal() {
      return isExternal(this.icon)
    },
    // 是不是iconify图标
    isIconifyIcon() {
      return /^([a-z|-]+):([a-z|-]+)$/.test(this.icon)
    },
    // 项目内图标
    symbolId() {
      return `#${this.prefix}-${this.icon}`
    },
    /**
     * 外部图标样式
     */
    styleExternalIcon() {
      return {
        background: `url(${this.icon}) no-repeat 50% 50%/cover`,
        '-webkit-mask': `url(${this.icon}) no-repeat 50% 50%/cover`,
        width: this.size,
        height: this.size
      }
    }
  },
  methods: {},
  watch: {}
}
</script>
<style lang="scss" scoped>
.svg-icon {
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
  display: inline-block;
}

.svg-external-icon {
  background-color: currentColor;
  mask-size: cover !important;
  display: inline-block;
}
</style>
